<!-- 页面 -->
<template>
    <div>
        <el-container>
            <el-header>
                <h1>星巴克后台管理</h1>
                <el-button type="success" class="btn1" @click="tuichu()">111退出</el-button>
            </el-header>
            <el-container style="height: 80vh;">
                <el-aside width="200px">
                    <el-menu default-active="1" class="el-menu-vertical-demo">
                        <el-menu-item index="1" @click="shu()">
                            <i class="el-icon-menu"></i>
                            <span slot="title">数据分析</span>
                        </el-menu-item>
                        <el-menu-item index="2" @click="yong()">
                            <i class="el-icon-menu"></i>
                            <span slot="title">用户列表</span>
                        </el-menu-item>
                        <el-menu-item index="3" @click="ding()">
                            <i class="el-icon-menu"></i>
                            <span slot="title">订单管理</span>
                        </el-menu-item>
                        <el-menu-item index="4" @click="cai()">
                            <i class="el-icon-menu"></i>
                            <span slot="title">菜品管理</span>
                        </el-menu-item>
                        <el-submenu index="5">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>导航一</span>
                            </template>
                            <el-menu-item-group>
                                <template slot="title">分组一</template>
                                <el-menu-item index="1-1">选项1</el-menu-item>
                                <el-menu-item index="1-2">选项2</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>

    </div>
</template>
<!-- vue -->
<script>
export default {
    data() {
        return {
            // 声明的属性
        }
    },
    //生命周期函数
    mounted() {
    },
    // 调用方法
    methods: {
        tuichu() {
            this.$router.push('/dl')
            localStorage.removeItem('token')
        },
        shu(){
            this.$router.push('/shu')
        },
        yong(){
            this.$router.push('/yong')
        },
        ding(){
            this.$router.push('/ding')
        },
        cai(){
            this.$router.push('/cai')
        },
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.el-header {
    width: 100%;
    height: 80px;
    background: url('https://artwork.starbucks.com.cn/banners-homepage-banner/main_85819d0d-0878-4e92-95a8-a944799b631e.png')
}

h1 {
    line-height: 80px;
    color: #fff;
    float: left;
}

.btn1 {
    float: right;
}

.el-container {
    background-color: #f7f7f7;
}

.el-aside {
    background-color: #fff;
}
</style>